<template>
  <basic-container>
    <div class="flex-start">
      <el-date-picker
        @change="query"
        size="small"
        v-model="searchDate"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-input
        @blur="query"
        size="small"
        clearable
        style="width: 400px"
        suffix-icon="el-icon-search"
        v-model="search.queryStr"
        class="m-l-10"
        placeholder="请输入加注机编号"
      />
    </div>
    <el-table
      class="my-table m-t-10"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      height="calc(100vh - 250px)"
      border
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column prop="macCode" label="加注机编号" min-width="200" />
      <el-table-column prop="remark" label="故障描述" min-width="180" />
      <el-table-column prop="userName" label="提报人" min-width="180" />
      <el-table-column prop="userPhone" label="手机号码" min-width="130" />
      <el-table-column prop="createTime" label="反馈时间" width="180" />
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @change="query"
    />
  </basic-container>
</template>

<script>
import { getRecords, getTotal, isNull } from "@/util/common-util";
import AppPagination from "@/components/business/app-pagination";
import { getPage } from "@/api/business/filling-machine-feedback";

export default {
  name: "dispenser-feedback",
  components: { AppPagination },
  data() {
    return {
      loading: false,
      searchDate: [],
      search: {
        startTime: "",
        endTime: "",
        queryStr: "",
      },
      data: [],
      total: 0,
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      }
      this.loading = true;
      this.search.startTime = this.searchDate[0];
      this.search.endTime = this.searchDate[1];
      getPage(_page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
